<!--
 * @Autor: Ruohong Yu
 * @Date: 2022-04-21 15:24:48
 * @LastEditors: Ruohong Yu
 * @LastEditTime: 2022-05-24 14:36:39
 * @Description: file content
 * @FilePath: \merword:\program\p\pythonProject\FTP_Project\templates\home.html
-->
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    function last(){
      $.ajax({
        url: "http://127.0.0.1:8080/lastpath", //请求的url地址
        type: "post", //设置请求的http方式，method也可以
        dataType: "json",
        data: {
        },
        success: function (data) {
            window.location.href = '/home'+data.data
        },
        error: function (error) {
          console.log(error);
        },
      });
    }
  </script>
</head>
<body>
  <div class="header">
    <div class="proname">COW FTP</div>
    <div class="proname"><a style="text-decoration: none;color: aliceblue;" href="./home">首页</a></div>
    <div class="proname"><a style="text-decoration: none;color: aliceblue;" href="./up">上传</a></div>
    <div class="proname"><a style="text-decoration: none;color: aliceblue;" href="./log">日志</a></div>
  </div>
  
  <div class="contain">
    <form class="apath">
      <div class="filepath">D:\program\p\pythonProject\FTP_Project\upload</div>
      <div class="hin">
        <div class="hinname">名称</div>
        <div class="hinname">修改日期</div>
        <div class="hinname">大小</div>
      </div>
      {% if dirList %}
          {% for dir in dirList %}
              <label>
                  <div class="dir">
                    <div class="dirinfor">
                      <input type="checkbox" value="{{ dir.name }}" name="{{ dir.name }}">
                      <a target="" href=/home/{{ path }}{{ dir.name }}>{{ dir.name }}</a>
                    </div>
                    <div class="dirinfor">{{ dir.date }}</div>
                    <div class="dirinfor"></div>
                  </div>
              </label>
          {% endfor %}
      {% endif %}
  
      {% if fileList %}
          {% for file in fileList %}
              <label>
                <div class="file">
                  <div class="fileinfor">
                    <input type="checkbox" value="{{ file.name }}" name="{{ file.name }}">
                    <a target="" href=/home/{{ path }}{{ file.name }}>{{ file.name }}</a>
                  </div>
                  <div class="fileinfor">{{ file.date }}</div>
                  <div class="fileinfor">{{ file.size }}KB</div>
                </div>
              </label>
          {% endfor %}
      {% endif %}
      <hr>
      
      <button class="opbt" onclick="last()">返回上一级</button>
      <input class="opbt" type=submit value=删除 formaction="/del" formmethod="post" name="del">
    </form>
  </div>


</body>
<style>
  html,body{
    margin: 0;
    padding: 0;
    height: 100%;
    background: url("/static/assets/1.jpg") center no-repeat;
    background-size: 100% 100%;
    font-weight: 300;
  }
  a{
    outline: none;
    text-decoration: none;
    color: aliceblue;
  }
  .header{
    display: flex;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: #252a3be6;
    color: aliceblue;
  }
  .proname{
    width: 80px;
    color: aliceblue;
    margin-left: 30px;
  }
  .apath{
    margin:10px 10%;
    background-color: #0000002b;
    border-radius: 10px;
    color: aliceblue;
    backdrop-filter: blur(3px);
  }
  .filepath{
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: aliceblue;
    background-color: #000d3147;
  }
  .hin{
    width: 100%;
    height: 30px;
    line-height: 30px;
    display: flex;
  }
  .hinname{
    display: inline-block;
    flex: 1;
    text-align: center;
    color: aliceblue;
  }
  .file{
    width: 100%;
    height: 30px;
    line-height: 30px;
    display: flex;
  }
  .fileinfor{
    display: inline-block;
    flex: 1;
    text-align: center;
  }
  .dir{
    width: 100%;
    height: 30px;
    line-height: 30px;
    display: flex;
  }
  .dirinfor{
    display: inline-block;
    flex: 1;
    text-align: center;
  }
  .opbt{
    width: 92px;
    height: 30px;
    margin: 10px 0px 10px 15px;
    background-color: rgb(37, 61, 82);
    color: aliceblue;
    border: 0px;
    cursor: pointer;
    border-radius: 3px;
  }
  .opbt:hover{
    background-color: aliceblue;
    color: #000000;
    transition:500ms;
  }
</style>
</html>